<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="__STATIC__/css/login.css">
<script src="__STATIC__/js/jquery.min.js"></script>
<script src="__STATIC__/js/jquery-ui.min.js"></script>
<script src="__STATIC__/js/vue.min.js"></script>
</head>
<body>

<div class="loginbox" id="loginBox">

<div class="login-container" style="height:100%">

    <div class="clouds clouds-footer"></div>
    <div class="clouds"></div>
    <div class="clouds clouds-fast"></div>
    <div id="login_form" class="container" style="height:1500px">


<!--    <form action='regist_submit' method="post" class="content">-->

        <form @submit.prevent='send' class="content" >

            <div class="people">
                <div class="tou"><a href="__ROOT__/index" style="color: #754930;position: absolute;left: 4px;top: 25px;width: 97px;  height: 92px;text-align: center">index</a></div>
                <div id="left-hander" class="initial_left_hand transition"></div>
                <div id="right-hander" class="initial_right_hand transition"></div>
            </div>

            <ul class='register'>
                <li>
                      <h2>
                      用户注册<span>UserRegist</span>
                      </h2>
                </li>
                <span>
                  <input style="display:none" type="text"  v-model="user_name" name="user_name"/>
                    <input required="required"
                           pattern="^\S{4,}$"
                           title="请输入4位及以上的字符"
                           type="text"
                           v-model="user_name"
                           name="user_name"
                           autocomplete="off"
                           autofocus="autofocus"
                           class="login-input username"
                           placeholder="请输入用户名"/>
                </span>
                <span>
                  <input style="display:none" type="text" v-model="UserEmail" name="UserEmail"/>
                    <input required="required"
                           pattern="^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+$"
                           title="请输入正确邮箱地址"
                           type="text"
                           v-model="UserEmail"
                           name="UserEmail"
                           autocomplete="off"
                           autofocus="autofocus"
                           class="login-input username"
                           placeholder="请输入邮箱"/>
                </span>
                <span>
                <input style="display:none" type="password" v-model="UserPasswd" name="UserPasswd"/>
                    <input required="required"
                           pattern="^\S{6,}$"
                           title="请输入6位及以上的字符"
                           type="password"
                           v-model="UserPasswd"
                           name="UserPasswd"
                           autocomplete="off"
                           class="login-input password"
                           placeholder="请输入密码"/>
                </span>
                <li class="text-center">
                    <a href="/" class="toReturn">返 回</a>
<!--                    <a onClick="javascript :history.back(-1);" class="toReturn">返 回 </a>-->
                    <button type="submit" class="layui-btn">马 上 注 册</button>
<!--                    <span class="toLogin">有账号了？去登陆</span>-->
                    <a href="login" class="toLogin">有账号了？去登陆</a>
                </li>
            </ul>
        </form>
  </div>
</div>
</div>
</body>

<script>
    var loginBox = new Vue({
        el : '#loginBox',
        data : {
            user_name : '',
            UserPasswd : '',
            UserEmail:'',
            result1:{

            }
        },
        methods : {
            send : function(){
                var _self = this;
                $.ajax({
                    type : 'POST',
                    sync:true,
                    url : 'http://message.com/index/regist/regist',
                    data : {
                        username : _self.user_name,
                        password : _self.UserPasswd,
                        email : _self.UserEmail
                    },
                    dataType:'Json',
                    success : function(result){
                        alert(result.msg)
                        if(result.status == 0) {
                            setTimeout(10000)
                            location.href = '/';
                        }
                    }
                })
            }
        }
    })
</script>
</html>